import React, {
    useState,
} from "react";
import { Loading, Modal } from "../commonComp/index";

import { connect, useDispatch } from "react-redux";
import Scrollbars from "react-custom-scrollbars";
import "./index.scss";
/**
 * 传参：
 * title: 弹出框名称
 * width: 弹出框宽度
 * height: 弹出框内容区域高度
 * children: 弹出框内容区域（即Modal组件含有的子元素，不需要手动传参）
 * visible: 弹出框显隐
 * changeVisible：控制弹出框显隐函数
 * onOk：确认函数
 * onCancel: 取消函数
 * className：弹窗类名
 * noFooter: 不显示默认弹窗底部
 */
function MyModal(props) {
    let {
        title,
        width,
        height,
        children,
        visible,
        changeVisible,
        onOk,
        onCancel,
        className,
        noFooter,
        bodyStyle,
        showAlert,
        loadVisible,
        zIndex
    } = props;
    const dispatch = useDispatch();
    const [tipShow, setTipShow] = useState(false);
    const confirm = () => {
        if(loadVisible){
            return;
        }
        typeof onOk === "function" && onOk();
        // changeVisible(false);
    }
    const cancel = () => {
        if(loadVisible){
            return;
        }
        typeof onCancel === "function" && onCancel();
        // if(tipShow){
        //     dispatch({
        //         type: "SHOW_ALERT",
        //         data: true
        //     })
        // } else {
        //     changeVisible(false);
        // }
        changeVisible(false);
    }
    return (
        <Modal
            type="1"
            title={title}
            visible={visible}
            onOk={()=>changeVisible(true)}
            onCancel={cancel}
            footer={null}
            width={width}
            destroyOnClose={true}
            zIndex={zIndex? zIndex: ""}
            className={`my_modal ${className? className: ""}`}
            bodyStyle={bodyStyle? bodyStyle: {height: height + 'px', padding: "20px 0 0 0"}}
        >
            <Loading opacity={false} spinning={loadVisible? loadVisible: false} tip="数据处理中...">
            {
                noFooter?
               children:
                <Scrollbars autoHeight autoHeightMax={height - 95}>
                    <div className="body_container clear" style={{minHeight: height - 95}} onClick={()=>setTipShow(true)}>{children}</div>
                </Scrollbars>
            }
            </Loading>
            {
                noFooter?
                "":
                <div className="modal_footer">
                    <div className="confirm_btn" onClick={confirm}>确定</div>
                    <div className="cancel_btn" onClick={cancel}>取消</div>
                </div>
            }
        </Modal>
    )
}

export default MyModal;
  